<template>
  <div class="container">
    <loader v-if="!imgUrl"></loader>
    <div class="block" v-else>
      <el-carousel trigger="click" :interval="3000" arrow="always">
        <el-carousel-item v-for="item in imgUrl" :key="item.imageUrl">
          <a :href="item.url">
            <img :src="item.imageUrl" :alt="item.typeTitle" />
          </a>
        </el-carousel-item>
      </el-carousel>
      <a class="download" href="https://music.163.com/#/download"></a>
    </div>
  </div>
</template>

<script>
import Loader from '@/components/common/loader/Loader'

export default {
  components: {
    Loader
  },
  props: {  
    imgUrl: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>

<style scoped>
.container {
  width: 980px;
  height: 270px;
}
/* banner区域+download */
.block {
  width: 980px;
  height: 270px;
  overflow: hidden;
  margin: 0 auto;
}

/* 修改箭头样式 */
.block >>> .el-carousel__arrow {
  width: 50px;
  height: 60px;
  font-size: 50px;
  border-radius: 0;
}

/* 轮播图大小 */
.el-carousel {
  float: left;
  width: 750px;
  height: 270px;
  overflow: hidden;
}
img {
  width: 750px;
}

/* 轮播图下的滚动条 */
.block >>> .el-carousel__indicators {
  width: 100%;
  text-align: center;
}

/* 下载客户端图片 */
.download {
  float: right;
  background: url(~@/assets/img/download.png);
  width: 230px;
  height: 270px;
}
</style>